$menu-bg: #545c64;

$listMarginPadding: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48;
$display: block, inline, inline-block, flex, none;
$justifyContent: flex-start , flex-end , center , space-between , space-around;
$alignItems: flex-start , flex-end , center , baseline , stretch;
$flexDirection:row , row-reverse , column , column-reverse;

$rotateX: 90, 180, 270;

@each $item in $listMarginPadding{
  /* margin 外边距 */
	.ml-#{$item} {
		margin: 0 0 0 #{$item}px;
	}

	.mr-#{$item} {
		margin: 0 #{$item}px 0 0 ;
	}

	.mt-#{$item} {
		margin: #{$item}px 0 0 0;
	}

	.mb-#{$item} {
		margin: 0 0 #{$item}px 0;
	}
  /* padding 内边距 */
	.pl-#{$item} {
		padding: 0 0 0 #{$item}px;
	}

	.pr-#{$item} {
		padding: 0 #{$item}px 0 0;
	}

	.pt-#{$item} {
		padding: #{$item}px 0 0 0;
	}

	.pb-#{$item} {
		padding: 0 0 #{$item}px 0;
	}
}

@each $item in $display {
	.#{$item} {
		display: #{$item};
	}
}
@each $item in $justifyContent{
  .jc-#{$item}{
    justify-content: #{$item};
  }
}
@each $item in $alignItems{
  .ai-#{$item}{
    align-items: #{$item};
  }
}
@each $item in $flexDirection{
  .fd-#{$item}{
    flex-direction: #{$item};
  }
}

@each $item in $rotateX {
  .rotateX-#{$item} {
    transform: rotateX(#{$item}deg)
  }
}

@for $i from 1 through 5 {
	.ellipsis-#{$i} {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: #{$i};
		overflow: hidden;
		word-break: break-all;
	}
}